<template>
  <div class="flex flex-col">
    <!-- 数据对照 -->
    <ContentWrap :show-header="true" :body-style="{ padding: '10px 10px 0 10px' }">
      <template #header>
        <el-form
          ref="queryFormRef"
          :inline="true"
          :model="queryParams"
          class="-mb-18px"
          label-width="68px"
        >
          <el-form-item prop="query" class="mr-10px!">
            <el-radio-group
              v-model="queryParams.query"
              @change="
                () => {
                  queryParams.times = []
                  handleQueryGetTradeTodayRebateSummary()
                }
              "
            >
              <el-radio-button :value="0">今日</el-radio-button>
              <el-radio-button :value="1">本周</el-radio-button>
              <el-radio-button :value="2">本月</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="times" class="mr-10px!">
            <el-date-picker
              v-model="queryParams.times"
              :shortcuts="defaultShortcuts"
              :disabled-date="disabledDate"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              class="!w-240px"
              end-placeholder="结束日期"
              start-placeholder="开始日期"
              type="daterange"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="
                () => {
                  queryParams.query = undefined
                  handleQueryGetTradeTodayRebateSummary()
                }
              "
            />
          </el-form-item>

          <el-form-item class="mr-10px!">
            <el-button @click="handleQueryGetTradeTodayRebateSummary">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
          </el-form-item>
          <el-form-item class="mr-10px!">
            <el-button @click="resetQueryGetTradeTodayRebateSummary">
              <Icon class="mr-5px" icon="ep:refresh" />
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </template>
      <el-row :gutter="10" class="row">
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_yye"
            title="实收业绩(元)"
            tips="门店今日全部的收入总和，包含销售、充值、还款的收入（不包含代金券、积分抵扣、赠送金额及不统计营收的支付方式所支付的金额）。"
            :decimals="2"
            :value="fenToYuan(todayRebate?.otherPrice?.currentValue || 0)"
            :yesterday-value="fenToYuan(todayRebate?.otherPrice?.yesterdayValue || 0)"
            :month-value="fenToYuan(todayRebate?.otherPrice?.monthValue || 0)"
            :day-chain="todayRebate?.otherPrice?.dayChain"
            :day-trend="todayRebate?.otherPrice?.dayTrend"
            :month-chain="todayRebate?.otherPrice?.monthChain"
            :month-trend="todayRebate?.otherPrice?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_yj"
            title="划卡业绩(元)"
            tips="门店使用提货卡、储值卡、会员卡、会员余额支付（抵扣）商品的金额总和"
            :decimals="2"
            :value="fenToYuan(todayRebate?.ppcPrice?.currentValue || 0)"
            :yesterday-value="fenToYuan(todayRebate?.ppcPrice?.yesterdayValue || 0)"
            :month-value="fenToYuan(todayRebate?.ppcPrice?.monthValue || 0)"
            :day-chain="todayRebate?.ppcPrice?.dayChain"
            :day-trend="todayRebate?.ppcPrice?.dayTrend"
            :month-chain="todayRebate?.ppcPrice?.monthChain"
            :month-trend="todayRebate?.ppcPrice?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_xhyj"
            title="消耗业绩(元)"
            tips="门店今日服务消耗的总金额。（消耗业绩计算公式：购买卡项总金额/购买总次数*服务扣卡数量=卡项消耗金额。）"
            :decimals="2"
            :value="fenToYuan(todayRebate?.performancePrice?.currentValue || 0)"
            :yesterday-value="fenToYuan(todayRebate?.performancePrice?.yesterdayValue || 0)"
            :month-value="fenToYuan(todayRebate?.performancePrice?.monthValue || 0)"
            :day-chain="todayRebate?.performancePrice?.dayChain"
            :day-trend="todayRebate?.performancePrice?.dayTrend"
            :month-chain="todayRebate?.performancePrice?.monthChain"
            :month-trend="todayRebate?.performancePrice?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_tk"
            title="现金退款(元)"
            tips="总部今日同意门店的退款申请，且退款方式为现金的金额（不包含退款到会员卡余额的金额）。"
            :decimals="2"
            :value="fenToYuan(todayRebate?.refundPrice?.currentValue || 0)"
            :yesterday-value="fenToYuan(todayRebate?.refundPrice?.yesterdayValue || 0)"
            :month-value="fenToYuan(todayRebate?.refundPrice?.monthValue || 0)"
            :day-chain="todayRebate?.refundPrice?.dayChain"
            :day-trend="todayRebate?.refundPrice?.dayTrend"
            :month-chain="todayRebate?.refundPrice?.monthChain"
            :month-trend="todayRebate?.refundPrice?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_tk"
            title="欠款金额(元)"
            tips="会员在支付时选择欠款支付的总金额。"
            :decimals="2"
            :value="fenToYuan(todayRebate?.arrearsPrice?.currentValue || 0)"
            :yesterday-value="fenToYuan(todayRebate?.arrearsPrice?.yesterdayValue || 0)"
            :month-value="fenToYuan(todayRebate?.arrearsPrice?.monthValue || 0)"
            :day-chain="todayRebate?.arrearsPrice?.dayChain"
            :day-trend="todayRebate?.arrearsPrice?.dayTrend"
            :month-chain="todayRebate?.arrearsPrice?.monthChain"
            :month-trend="todayRebate?.arrearsPrice?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_kl"
            title="成交会员(人)"
            tips="下单并成功支付的会员数量。"
            :value="todayRebate?.memberUser?.currentValue || 0"
            :yesterday-value="todayRebate?.memberUser?.yesterdayValue || 0"
            :month-value="todayRebate?.memberUser?.monthValue || 0"
            :day-chain="todayRebate?.memberUser?.dayChain"
            :day-trend="todayRebate?.memberUser?.dayTrend"
            :month-chain="todayRebate?.memberUser?.monthChain"
            :month-trend="todayRebate?.memberUser?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_xm"
            title="服务项目(次)"
            tips="门店今日服务的卡项数量总和。"
            :value="todayRebate?.serviceNum?.currentValue || 0"
            :yesterday-value="todayRebate?.serviceNum?.yesterdayValue || 0"
            :month-value="todayRebate?.serviceNum?.monthValue || 0"
            :day-chain="todayRebate?.serviceNum?.dayChain"
            :day-trend="todayRebate?.serviceNum?.dayTrend"
            :month-chain="todayRebate?.serviceNum?.monthChain"
            :month-trend="todayRebate?.serviceNum?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_kl"
            title="服务会员(人)"
            tips="门店今日产生服务的客户数量。"
            :value="todayRebate?.serviceUser?.currentValue || 0"
            :yesterday-value="todayRebate?.serviceUser?.yesterdayValue || 0"
            :month-value="todayRebate?.serviceUser?.monthValue || 0"
            :day-chain="todayRebate?.serviceUser?.dayChain"
            :day-trend="todayRebate?.serviceUser?.dayTrend"
            :month-chain="todayRebate?.serviceUser?.monthChain"
            :month-trend="todayRebate?.serviceUser?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_yyxm"
            title="预约项目(次)"
            tips="门店今日预约服务卡项的数量总和。"
            :value="todayRebate?.reservSkuNum?.currentValue || 0"
            :yesterday-value="todayRebate?.reservSkuNum?.yesterdayValue || 0"
            :month-value="todayRebate?.reservSkuNum?.monthValue || 0"
            :day-chain="todayRebate?.reservSkuNum?.dayChain"
            :day-trend="todayRebate?.reservSkuNum?.dayTrend"
            :month-chain="todayRebate?.reservSkuNum?.monthChain"
            :month-trend="todayRebate?.reservSkuNum?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_yy"
            title="预约会员(人)"
            tips="今日预约成功的会员数量，包含门店预约会员行为和会员主动预约行为。"
            :value="todayRebate?.reservNum?.currentValue || 0"
            :yesterday-value="todayRebate?.reservNum?.yesterdayValue || 0"
            :month-value="todayRebate?.reservNum?.monthValue || 0"
            :day-chain="todayRebate?.reservNum?.dayChain"
            :day-trend="todayRebate?.reservNum?.dayTrend"
            :month-chain="todayRebate?.reservNum?.monthChain"
            :month-trend="todayRebate?.reservNum?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_kll"
            title="待赴约会员(人)"
            tips="门店之前预约需今日到店的客流人数总和。"
            :value="todayRebate?.reservSuccessNum?.currentValue || 0"
            :yesterday-value="todayRebate?.reservSuccessNum?.yesterdayValue || 0"
            :month-value="todayRebate?.reservSuccessNum?.monthValue || 0"
            :day-chain="todayRebate?.reservSuccessNum?.dayChain"
            :day-trend="todayRebate?.reservSuccessNum?.dayTrend"
            :month-chain="todayRebate?.reservSuccessNum?.monthChain"
            :month-trend="todayRebate?.reservSuccessNum?.monthTrend"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" :loading="loading">
          <ComparisonCard
            :icon="home_today_add"
            title="新增会员(人)"
            tips="门店今日新增新会员的数量总和。"
            :value="todayRebate?.newUser?.currentValue || 0"
            :yesterday-value="todayRebate?.newUser?.yesterdayValue || 0"
            :month-value="todayRebate?.newUser?.monthValue || 0"
            :day-chain="todayRebate?.newUser?.dayChain"
            :day-trend="todayRebate?.newUser?.dayTrend"
            :month-chain="todayRebate?.newUser?.monthChain"
            :month-trend="todayRebate?.newUser?.monthTrend"
          />
        </el-col>
      </el-row>
    </ContentWrap>
    <!-- 数据对照 -->
    <ContentWrap :show-header="true" :body-style="{ padding: '10px 10px 0 10px' }">
      <template #header>
        <el-form
          ref="queryFormRef"
          :inline="true"
          :model="queryParamsMonth"
          class="-mb-18px"
          label-width="68px"
        >
          <el-form-item prop="query" class="mr-10px!">
            <el-radio-group
              v-model="queryParamsMonth.query"
              @change="
                () => {
                  queryParams.times = []
                  handleQueryGetTradeMonthRebateSummary()
                }
              "
            >
              <el-radio-button :value="0">今日</el-radio-button>
              <el-radio-button :value="1">本周</el-radio-button>
              <el-radio-button :value="2">本月</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="times" class="mr-10px!">
            <el-date-picker
              v-model="queryParamsMonth.times"
              :shortcuts="defaultShortcuts"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              class="!w-240px"
              end-placeholder="结束日期"
              start-placeholder="开始日期"
              type="daterange"
              :disabled-date="disabledDate"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="
                () => {
                  queryParamsMonth.query = undefined
                  handleQueryGetTradeMonthRebateSummary()
                }
              "
            />
          </el-form-item>

          <el-form-item class="mr-10px!">
            <el-button @click="handleQueryGetTradeMonthRebateSummary">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
          </el-form-item>
          <el-form-item class="mr-10px!">
            <el-button @click="resetQueryGetTradeMonthRebateSummary">
              <Icon class="mr-5px" icon="ep:refresh" />
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </template>

      <el-row class="row">
        <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="3" :loading="loading">
          <ComparisonEchartCard
            title="实收业绩"
            prefix="元"
            tips="门店本月全部的收入总和，包含销售、充值、还款的收入（不包含代金券、积分抵扣、赠送金额及不统计营收的支付方式所支付的金额）。"
            :value="fenToYuan(monthRebate?.total?.otherPrice || 0)"
            :series-data="monthRebate?.otherPrice || []"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="3" :loading="loading">
          <ComparisonEchartCard
            title="划卡业绩"
            prefix="元"
            tips="门店本月使用提货卡、储值卡、会员卡、会员余额支付（抵扣）商品的金额总和。"
            :value="fenToYuan(monthRebate?.total?.ppcPrice || 0)"
            :series-data="monthRebate?.ppcPrice || []"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="3" :loading="loading">
          <ComparisonEchartCard
            title="消耗业绩"
            prefix="元"
            tips="门店本月服务消耗的总金额。（消耗业绩计算公式：购买卡项总金额/购买总次数*服务扣卡数量=卡项消耗金额。）"
            :value="fenToYuan(monthRebate?.total?.performancePrice || 0)"
            :series-data="monthRebate?.performancePrice || []"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="3" :loading="loading">
          <ComparisonEchartCard
            title="服务项目"
            prefix="次"
            tips="门店本月服务的卡项数量总和。"
            :is-formatting="false"
            :value="monthRebate?.total?.serviceNum || 0"
            :series-data="monthRebate?.serviceNum || []"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="3" :loading="loading">
          <ComparisonEchartCard
            title="门店客流"
            prefix="人"
            tips="门店本月全部的客户。"
            :is-formatting="false"
            :value="monthRebate?.total?.memberUser || 0"
            :series-data="monthRebate?.memberUser || []"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="3" :loading="loading">
          <ComparisonEchartCard
            title="欠款金额"
            prefix="元"
            tips="门店本月会员在支付时选择欠款支付的总金额。"
            :value="fenToYuan(monthRebate?.total?.arrearsPrice || 0)"
            :series-data="monthRebate?.arrearsPrice || []"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="3" :loading="loading">
          <ComparisonEchartCard
            title="还款金额"
            prefix="元"
            tips="门店本月会员门店本月全部的还款金额总和。"
            :value="fenToYuan(monthRebate?.total?.repayPrice || 0)"
            :series-data="monthRebate?.repayPrice || []"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="3" :loading="loading">
          <ComparisonEchartCard
            title="新增会员"
            prefix="人"
            :is-formatting="false"
            tips="门店本月新增会员总和。"
            :value="monthRebate?.total?.newUser || 0"
            :series-data="monthRebate?.newUser || []"
          />
        </el-col>
      </el-row>
    </ContentWrap>
    <!-- 数据对照 -->
    <!-- <ContentWrap title="目标OKR" :body-style="{ padding: '10px 10px 0 10px' }">
      <el-row class="row">
        <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" :loading="loading">
          <OKRCard
            title="销售业绩"
            tips=""
            :value="fenToYuan(todayRebate?.value?.orderPayPrice || 0)"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" :loading="loading">
          <OKRCard
            title="消耗业绩"
            tips=""
            :value="fenToYuan(todayRebate?.value?.orderPayPrice || 0)"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" :loading="loading">
          <OKRCard
            title="服务客流"
            tips=""
            :value="fenToYuan(todayRebate?.value?.orderPayPrice || 0)"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" :loading="loading">
          <OKRCard
            title="服务项目"
            tips=""
            :value="fenToYuan(todayRebate?.value?.orderPayPrice || 0)"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" :loading="loading">
          <OKRCard
            title="新增会员"
            tips=""
            :value="fenToYuan(todayRebate?.value?.orderPayPrice || 0)"
          />
        </el-col>
        <el-col :xs="12" :sm="12" :md="4" :lg="4" :xl="4" :loading="loading">
          <OKRCard
            title="特殊商品"
            tips=""
            :value="fenToYuan(todayRebate?.value?.orderPayPrice || 0)"
          />
        </el-col>
      </el-row>
    </ContentWrap> -->
    <!-- <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        常用功能
        <ShortcutCard />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        待办事项
        <OperationDataCard />
      </el-col>
    </el-row> -->
    <!-- <el-row :gutter="10">
      <el-col :md="18" :sm="24">
        会员概览
        <MemberFunnelCard />
      </el-col>
      <el-col :md="6" :sm="24">
        会员终端
        <MemberTerminalCard />
      </el-col>
    </el-row> -->
    <!-- 交易量趋势 -->
    <!-- <TradeTrendCard class="mb-10px" /> -->
    <!-- 会员统计 -->
    <!-- <MemberStatisticsCard /> -->
    <!-- 客户来源 -->
    <!-- <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        客户年龄
        <AgeCard />
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        购买用户
        <UserStatisticsCard />
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        客户来源
        <MemberSourcelCard />
      </el-col>
    </el-row> -->
  </div>
</template>
<script lang="ts" setup>
import * as TradeStatisticsApi from '@/api/shop/statistics/trade'
import { fenToYuan } from '@/utils'
import { defaultShortcuts } from '@/utils/formatTime'

import ComparisonCard from './components/ComparisonCard.vue'
import ComparisonEchartCard from './components/ComparisonEchartCard.vue'
import MemberStatisticsCard from './components/MemberStatisticsCard.vue'
import OperationDataCard from './components/OperationDataCard.vue'
import AgeCard from './components/AgeCard.vue'
// import OKRCard from './components/OKRCard.vue'
import ShortcutCard from './components/ShortcutCard.vue'
import TradeTrendCard from './components/TradeTrendCard.vue'
import UserStatisticsCard from './components/UserStatisticsCard.vue'
import MemberTerminalCard from './components/MemberTerminalCard.vue'
import MemberFunnelCard from './components/MemberFunnelCard.vue'
import MemberSourcelCard from './components/MemberSourcelCard.vue'
import home_today_kl from '@/assets/imgs/home/home_today_kl.png'
import home_today_xm from '@/assets/imgs/home/home_today_xm.png'
import home_today_yj from '@/assets/imgs/home/home_today_yj.png'
import home_today_tk from '@/assets/imgs/home/home_today_tk.png'
import home_today_xhyj from '@/assets/imgs/home/home_today_xhyj.png'
import home_today_add from '@/assets/imgs/home/home_today_add.png'
import home_today_kll from '@/assets/imgs/home/home_today_kll.png'
import home_today_yye from '@/assets/imgs/home/home_today_yye.png'
import home_today_yy from '@/assets/imgs/home/home_today_yy.png'
import home_today_yyxm from '@/assets/imgs/home/home_today_yyxm.png'

/** 商城首页 */
defineOptions({ name: 'Home' })
const queryFormRef = ref()
const loading = ref(true) // 加载中
/**时间范围限制 */
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
/** 查询今日统计  */
const todayRebate = ref<any>() //

const queryParams = reactive({
  mode: undefined,
  query: 0 as any,
  times: [],
  tenantIds: undefined
})
const getTradeRebateSummary = async () => {
  todayRebate.value = await TradeStatisticsApi.getTradeTodayRebateSummary(queryParams)
}
/** 搜索按钮操作 */
const handleQueryGetTradeTodayRebateSummary = () => {
  getTradeRebateSummary()
}

/** 重置按钮操作 */
const resetQueryGetTradeTodayRebateSummary = () => {
  queryFormRef.value.resetprops()
  getTradeRebateSummary()
}
/** 查询本月统计 */
const monthRebate = ref<any>() // 用户对照数据

const queryParamsMonth = reactive({
  mode: undefined,
  query: 0 as any,
  times: [],
  tenantIds: undefined
})
const getTradeMonthSummary = async () => {
  monthRebate.value = await TradeStatisticsApi.getTradeMonthRebateSummary(queryParamsMonth)
}
/** 搜索按钮操作 */
const handleQueryGetTradeMonthRebateSummary = () => {
  getTradeMonthSummary()
}

/** 重置按钮操作 */
const resetQueryGetTradeMonthRebateSummary = () => {
  queryFormRef.value.resetprops()
  getTradeMonthSummary()
}

// 销售门店列表
import * as TenantApi from '@/api/system/tenant'
const tenantList = ref<any>([])
const getTenantList = async () => {
  let params = {
    tenantType: 4
  }
  const data = await TenantApi.getTenantPage(params)

  data.list.map((ele) => {
    tenantList.value.push({
      name: ele.name,
      id: ele.id
    })
  })
}

/** 初始化 **/
onMounted(async () => {
  loading.value = true
  await Promise.all([getTradeRebateSummary(), getTradeMonthSummary()])
  loading.value = false
  await getTenantList()
})
</script>
<style lang="scss" scoped>
.row {
  .el-card {
    --el-card-border-radius: 2px !important;
  }
  .el-col {
    margin-bottom: 10px;
  }
}
</style>
